<template>
  <div>
    <!-- 表单 -->
    <user-form @addUser="addUser" @updateUser="updateUser" ref="formRef" />
    <hr />
    <!-- 列表 -->
    <user-table :users="users" @editUser="editUser" />
  </div>
</template>

<script>
import userForm from './views/userForm.vue'
import userTable from './views/userTable.vue'
export default {
  components: {
    userForm,
    userTable
  },
  data() {
    return {
      // 用户列表数据
      users: [],
      // 要修改的index索引
      index: -1
    }
  },
  methods: {
    addUser(user) {
      this.users.push(user)
    },
    updateUser(data) {
      this.users[this.index] = data
      this.index = -1
    },
    editUser(index) {
      // 此时传过去的有 id字段 , 添加时是没有的
      // 直接给值，它是同一个地址，而此对象现在是响应式的，所以只要用到它的地方，都会在修改时更新
      // this.$refs.formRef.setUserForm(this.users[index])
      // 深复制一次，这样就让他们原来的关系断开了，没有关系
      this.$refs.formRef.setUserForm({ ...this.users[index] })
      this.index = index
    }
  }
}
</script>

<style lang="scss" scoped></style>
